<template>
<div>
<Row :gutter="8" align="middle" class="ivu-mb-16">
    <Col span="24">
        <DatePicker 
            :editable="false" 
            type="daterange" 
            v-model="currentTime"
            :options="options" 
            placeholder="请选择核验日期"
            @on-change="changeDatatime">
        </DatePicker>
        <Select v-model="params.patient_diseases_id" multiple @on-select="askData" placeholder="选择病种" style="width: auto;" class="ivu-ml-8" @on-clear="askData" clearable>
            <template  v-for="item in bingzhong">
            <OptionGroup v-if="item.children.length>0" :label="item.label">
                <Option v-for="ele in item.children" :value="ele.value" :key="ele.value">{{ ele.label }}</Option>
            </OptionGroup>
            <Option v-else :value="item.value">{{ item.label }}</Option>
            </template>
        </Select>
        <Select v-model="params.patient_status_id"  @on-select="askData" @on-clear="askData" clearable style="width: 120px;" placeholder="患者状态" class="ivu-ml-8">
            <Option v-for="item in hzstatus" :value="item.id" :key="item.id">{{ item.label }}</Option>
        </Select>
        <CheckboxGroup class="ivu-inline ivu-ml-8" @on-change="askData">
            <Checkbox v-model='have_image' label="有图"></Checkbox>
            <Checkbox v-model='no_image' label="无图"></Checkbox>
            <Checkbox v-model='have_change' label="有改动"></Checkbox>
        </CheckboxGroup>
        <Select v-model="firstChannel" @on-change="changeSource" clearable style="width: 120px;" placeholder="一级渠道" class="ivu-ml-8">
            <Option v-for="item in sourceList" :value="item.value" :key="item.id">{{ item.label }}</Option>
        </Select>
        <Select v-model="secondChannel" multiple @on-change="changeSecondSource" clearable style="width: auto;" placeholder="二级渠道" class="ivu-ml-8">
            <Option v-for="item in secondSourceList" :value="item.value" :key="item.id">{{ item.label }}</Option>
        </Select>
    </Col>
</Row>
<Table 
:columns="columns" 
:data="data" 
@on-sort-change="changeSort"
:loading="loading">
    <template slot="status" slot-scope="{ row }" >
        <Tag :color="statusColor[row.status_name]">{{row.status_name}}</Tag>
    </template>
    <template slot="info" slot-scope="{ row }" >
        <a @click="showInfo(row)">{{row.name}}({{row.gender_str}}{{row.age}})</a>
    </template>
</Table>

<Page
:total="total"
class="ivu-mt-16"
:current.sync="params.page"
:page-size="params.pageSize"
@on-change="formSize"
show-total
show-elevator
show-sizer
@on-page-size-change="formChangePage"
/>
<patient-detail
    ref="patientDetail"
    :btnShow="btnShow"
    :tabChange="true"
    @askData="$emit('refresh')"
/>
</div>
</template>
<script>
import patientDetail from '@/components/patientDetail';
import {checkedList}from "@/api/jzy";
export default {
    components: { patientDetail},
  data() {
    return {
        loading:false,
        showDrawer:false,
        currentTime:'',
        statusColor:{
            "预约":"#5cadff",
            "跟进中":"primary",
            "未开口":"#dcdee2",
            "意向一般":"default",
            "到诊":"success",
            "老患者到诊":"warning",
            "无效":"#c5c8ce",
        },
        params:{
            page:1,
            pageSize:10,
            check_stime:'',
            check_etime:'',
            patient_status_id:'',
            patient_diseases_id:[],
            have_image:0,
            no_image:0,
            have_change:0,
            sort_column:'',
            sort_order:''
        },
        have_image:false,
        no_image:false,
        have_change:false,
        options: {
            disabledDate(date) {
                return date && date.valueOf() > Date.now();
            }
        }, 
        columns: [
            {
                title: '基本信息',
                slot: 'info',
                fixed:"left",
                width:150,
            },
            {
                title: '核验时间',
                key: 'check_time_str',
                width:120
            },
            {
                title: '核验人',
                key: 'check_operation_name',
                width:120,
            },
            {
                title: '核验记录',
                key: 'check_record',
                width:180,
                tooltip:true
            },
            {
                title: '渠道',
                key: 'source_name',
                width:120,
            },
            {
                title: '病种',
                key: 'patient_diseases_name',
                width:180,
            },
            {
                title: '诊断病种',
                key: 'by_diseases_name',
                width:180,
            },
            {
                title: '归属人',
                key: 'belong_member_name',
                width:120,
            },
            {
                title: '图片数量',
                key: 'image_num',
                width:110,
                sortable:'custom',
            },
            {
                title: '患者状态',
                slot: 'status',
                width:120,
            },
            {
                title: '备注',
                key: 'remark',
                minWidth:200,
                tooltip:true
            },
            {
                title: '创建时间',
                key: 'created_at_str',
                width:120,
                sortable:'custom',
            }
        ],        
        total:0,
        data: [],     
        bingzhong:[],
        hzstatus: [],
        btnShow: [
            {
                name: 'v1-diseasecheck-index-sub',
                flag: 'v1/diseasecheck/index/sub'
            },
            {
                name: 'v1-diseasecheck-index-edit-remark',
                flag: 'v1/diseasecheck/index/edit-remark'
            },
            {
                name: 'v1-diseasecheck-index-update',
                flag: 'v1/diseasecheck/index/update'
            },
            {
                name: 'v1-diseasecheck-callback-callback-common-list',
                flag: 'v1/diseasecheck/callback/callback-common-list'
            },
            {
                name: 'v1-diseasecheck-index-edit-tags',
                flag: 'v1/diseasecheck/index/edit-tags'
            },
            {
                name: 'v1-diseasecheck-index-edit-tags2',
                flag: 'v1/diseasecheck/index/edit-tags'
            },
            {
                name: 'v1-diseasecheck-index-check',
                flag: 'v1/diseasecheck/index/check'
            }
        ],
        firstChannel:'',
        secondChannel:[], 
        sourceList:[],
        secondSourceList:[]
    };
  },
  methods: {
    getData(){
        this.loading=true;
        // this.params.patient_status_id=this.params.patient_status_id?1:0
        this.params.have_image=this.have_image?1:0
        this.params.have_change=this.have_change?1:0
        this.params.no_image=this.no_image?1:0
        checkedList(this.params).then(res=>{
            this.data=res.list.list
            this.total=res.list.total
            this.hzstatus=res.list.patient_status
            this.sourceList=res.list.source_channel
            this.bingzhong=res.list.diseases
            this.$emit('getTotal2',this.total)
            this.loading=false
        })
    },
    askData(){
        this.params.page = 1
        this.getData()
    },
    showInfo(row){
        this.$refs.patientDetail.handleOpen(row);
    },
    changeDatatime(e){
        this.params.check_stime = e[0];
        this.params.check_etime = e[1];
        this.askData();
    },
    changeSort(e){
        if(e.key=='created_at_str'){
            this.params.sort_column='created_at'
        }else{
            this.params.sort_column=e.key
        }
        this.params.sort_order=e.order
        this.getData()
    },
    changeSource(e){
        this.secondSourceList=[]
        this.secondChannel=[]
        this.sourceList.forEach(item=>{
            if(item.value==e){
                this.secondSourceList=item.children
            }
        })
        this.params.channel_id=e
        this.askData()
    },
    changeSecondSource(e){
        this.params.channel_id=e.join(',')
        this.askData()
    },
    formChangePage (e) {
      this.params.pageSize = e
      this.getData()
    },
    formSize (e) {
      this.params.page = e
      this.getData()
    }
  },
  mounted(){
    this.params.check_stime = this.$Date().subtract(6, 'day').format('YYYY-MM-DD');
    this.params.check_etime = this.$Date().format('YYYY-MM-DD');
    this.currentTime=[this.params.check_stime,this.params.check_etime]
    this.getData()
  }
};
</script>
<style lang="less" scoped>
    .modalFoot {
        text-align: right;
        border-top: 1px solid #ddd;
        padding-top: 16px;
        margin-top: 24px;
    }
</style>
